<template>
    <div class="pjtList">
        <div class="content">
            <div class="search">
                <div class="list">
                    <i class="el-icon-office-building"></i>
                </div>
                <div class="list countNum">
                    <span>共计{{ totalCount }}个项目</span>
                </div>
                <div class="list" style="margin-right: 20px">
                    <Input search enter-button v-model="keyword" placeholder="请输入项目名称" style="width: 470px" @on-search="searchAll" clearable/>
                    <input type="password" autocomplete="new-password" style="display: none" />
                </div>
                <input type="text" class="intBox" style="display: none" />
            </div>
            <div class="table_box">
                <div class="tableList" v-if="list.length > 0">
                    <div class="item" v-for="(item, index) in list" v-preventReClick="1500" :key="item.equipId" @click="getdetails(index, list)">
                        <div class="img">
                            <!-- 图片预览 2025-9-14 -->
                            <img v-if="item.cover" :src="item.cover" />
                            <img v-else src="../../assets/images/prj/list/project_img.png" />
                        </div>
                        <div class="info">
                            <div class="p">
                                <i class="el-icon-folder icon"></i>
                                <div class="name">项目名称</div>
                                <div class="sub">{{ item.name }}</div>
                            </div>
                            <div class="p">
                                <i class="el-icon-location icon"></i>
                                <div class="name">项目地址</div>
                                <div class="sub">{{ item.city }}</div>
                            </div>
                        </div>
                    </div>
                    <div class="clearfix" v-show="totalCount > 10" style="padding-bottom: 0" >
                        <div class="float-right">
                            <Page
                                v-if="totalCount"
                                style="margin: 20px 0; text-align: center"
                                :current="pageNum"
                                :total="totalCount"
                                :page-size="10"
                                show-elevator
                                show-total
                                @on-change="pageChange"
                            ></Page>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 项目详情弹窗 -->
        <Modal v-model="detailmodal" width="1000px" :mask-closable="false" :title="detail.name">
            <div class="detail" v-if="!isAdd">
                <div class="tags">
                    <div class="tags_title">
                        <h2>项目信息</h2>
                        <el-button
                            type="primary"
                            @click="edit_details"
                            v-if="!isAdd"
                            size="small"
                            :disabled="!btnList.includes('prj/list/edit')"
                            v-preventReClick="1500">
                            编辑
                        </el-button>
                    </div>
                    <div class="list">
                        <div class="item1">
                            <span>项目简称:</span>
                            <span>{{ detail.title }}</span>
                        </div>
                        <div class="item1">
                            <span>项目编码:</span>
                            <span>{{ detail.projectCode }}</span>
                        </div>
                    </div>
                    <div class="list">
                        <div class="item1">
                            <span>项目造价:</span>
                            <span v-if="detail.money">{{ detail.money }}万元</span>
                            <span v-else>-</span>
                        </div>
                        <div class="item1">
                            <span>施工许可证:</span>
                            <span>{{ detail.builderLicenseNum }}</span>
                        </div>
                    </div>
                    <div class="list">
                        <div class="item1" style="width: 100%">
                            <span>项目地址:</span>
                            <span v-if="ads != ''" style="display: inline-block; width: 500px" >{{ ads }}</span>
                            <span v-else>项目地点还未选择</span>
                        </div>
                    </div>
                </div>
                <div class="tags">
                    <h2>项目日期</h2>
                    <div class="list">
                        <div class="item1">
                            <span>开工日期:</span>
                            <span>{{ detail.startDate }}</span>
                        </div>
                        <div class="item1">
                            <span>竣工日期:</span>
                            <span>{{ detail.completeDate }}</span>
                        </div>
                    </div>
                    <div class="list">
                        <div class="item1">
                            <span>施工周期:</span>
                            <span v-if="detail.period">{{ detail.period }}个月</span>
                            <span v-else>-</span>
                        </div>
                    </div>
                </div>
                <div class="tags">
                    <h2>项目单位</h2>
                    <el-table :data="unitList" style="width: 96%; margin: 0 auto" border>
                        <el-table-column prop="type" label="单位类型"></el-table-column>
                        <el-table-column prop="name" label="单位名称"></el-table-column>
                    </el-table>
                </div>
                <div class="tags">
                    <h2>项目简介:</h2>
                    <div class="list" v-if="detail.shortInfo">
                        <div class="item1" style="width: 100%; height: auto">
                            <div class="item_msg">{{ detail.shortInfo }}</div>
                        </div>
                    </div>
                    <div class="list" v-if="!detail.shortInfo">
                        <div class="no_content">暂无项目简介</div>
                    </div>
                </div>
                <div class="tags">
                    <h2>项目职位</h2>
                    <el-table :data="postList" style="width: 96%; margin: 0 auto" border >
                        <el-table-column prop="post" label="职位" ></el-table-column>
                        <el-table-column prop="name" label="姓名" ></el-table-column>
                    </el-table>
                </div>
                <div class="tags">
                    <h2>宣传图片</h2>
                    <div class="imglist" v-show="detailImgList.length > 0">
                        <ul>
                            <li v-for="(item, index) in detailImgList" :key="index" >
                                <div>
                                    <img :src="item.imgUrl" />
                                    <span>{{ item.imgInfo }}</span>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="list" v-show="detailImgList.length == 0">
                        <div class="no_content">暂无宣传图片</div>
                    </div>
                </div>
            </div>
            <diV class="first" v-if="isAdd">
                <div class="first-step">
                    <h2>项目信息</h2>
                    <div class="msg">
                        <div class="list">
                            <div class="item1">
                                <span class="tip">*</span>
                                <span>项目名称:</span>
                                <Input v-model="prodect.name" placeholder="请输入项目名称" style="width: 300px" :disabled="true" clearable/>
                            </div>
                            <div class="item1">
                                <span class="tip">*</span>
                                <span>项目编码:</span>
                                <Input v-model="prodect.projectCode" placeholder="请输入项目编码" style="width: 300px" clearable/>
                            </div>
                        </div>
                        <div class="list">
                            <div class="item1">
                                <span class="tip">*</span>
                                <span>项目简称:</span>
                                <Input v-model="prodect.title" :maxlength="length" show-word-limit placeholder="请输入项目简称" style="width: 300px" clearable/>
                            </div>
                            <div class="item1">
                                <span class="tip">*</span>
                                <span>项目许可证:</span>
                                <Input v-model="prodect.builderLicenseNum" placeholder="请输入项目许可证" style="width: 300px" clearable/>
                            </div>
                        </div>
                        <div class="list">
                            <div class="item1">
                                <span>项目造价:</span>
                                <Input v-model.number="prodect.money" maxlength="9" placeholder="请输入项目造价" style="width: 280px" clearable/>
                                <span style="margin-left: 10px">万元</span>
                            </div>
                        </div>
                        <div class="list">
                            <div class="item1">
                                <span class="tip">*</span>
                                <span>项目地址:</span>
                                <div class="ads">
                                    <Input v-model="prodect.ads" style="width: 500px" clearable/>
                                    <el-button @click="getGPS" type="primary" size="small" plain >请选择项目地址</el-button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <h2>项目日期</h2>
                    <div class="msg">
                        <div class="list">
                            <div class="item1">
                                <span class="tip">*</span>
                                <span>开工日期:</span>
                                <DatePicker
                                    type="date"
                                    placeholder="请选择开工日期"
                                    style="width: 300px"
                                    format="yyyy-MM-dd"
                                    v-model="prodect.startDate"
                                    @on-change="getStartDate"
                                    :clearable="false"
                                ></DatePicker>
                            </div>
                            <div class="item1">
                                <span>竣工日期:</span>
                                <DatePicker
                                    type="date"
                                    placeholder="请选择竣工日期"
                                    style="width: 300px"
                                    format="yyyy-MM-dd"
                                    v-model="prodect.completeDate"
                                    @on-change="getExplorationUnit"
                                    :clearable="false"
                                ></DatePicker>
                            </div>
                        </div>
                        <div class="list">
                            <div class="item1">
                                <span>项目周期:</span>
                                <Input v-model.number="prodect.period" placeholder="请输入项目周期" style="width: 280px" clearable/>
                                <span>个月</span>
                            </div>
                        </div>
                    </div>
                    <h2>项目单位</h2>
                    <el-button @click="addPost(2)" style="margin-bottom: 20px; margin-top: 20px" type="primary" size="small" plain >添加单位</el-button>
                    <div class="table" v-show="unitList.length > 0">
                        <table class="create-table">
                            <el-table :data="unitList" style="width: 96%; margin: 0 auto" border >
                                <el-table-column label="单位类型">
                                    <template slot-scope="scope">
                                        <Input v-model="scope.row.type" placeholder="请输入单位类型" clearable/>
                                    </template>
                                </el-table-column>
                                <el-table-column label="单位名称">
                                    <template slot-scope="scope">
                                        <Input v-model="scope.row.name" placeholder="请输入单位名称" clearable/>
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作">
                                    <template slot-scope="scope">
                                        <el-button style="color: red" @click.native.prevent="remove(scope.$index, 2)" type="text" size="small" >删除</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </table>
                    </div>
                    <h2>项目简介</h2>
                    <div class="list">
                        <div class="item1">
                            <span>项目简介:</span>
                            <Input v-model="prodect.description" placeholder="请输入100字以内的项目简介" style="width: calc(100% - 100px)" type="textarea" :autosize="true" />
                        </div>
                    </div>
                    <h2>项目职位</h2>
                    <el-button @click="addPost(1)" style="margin-bottom: 20px; margin-top: 20px" type="primary" size="small" plain >添加职位</el-button>
                    <div class="table" v-show="postList.length > 0">
                        <table class="create-table">
                            <el-table :data="postList" style="width: 96%; margin: 0 auto" border >
                                <el-table-column label="职位">
                                    <template slot-scope="scope">
                                        <Input v-model="scope.row.post" placeholder="请输入职位" clearable/>
                                    </template>
                                </el-table-column>
                                <el-table-column label="姓名">
                                    <template slot-scope="scope">
                                        <Input v-model="scope.row.name" placeholder="请输入姓名" clearable/>
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作">
                                    <template slot-scope="scope">
                                        <el-button style="color: red" @click.native.prevent="remove(scope.$index, 1)" type="text" size="small" >删除</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </table>
                    </div>
                    <h2>宣传图片</h2>
                    <span>注:点击文件可预览，仅支持JPG/PNG/JPEG格式</span>
                    <div style="position: relative; margin: 20px 0">
                        <el-button type="primary" size="small" plain >选择图片</el-button>
                        <input id="upload_file" type="file" @change="getphoto" accept=".jpg, .png" style="position: absolute;left: 0;top: 0;height: 40px;opacity: 0;width: 80px;" />
                    </div>
                    <ul class="ulbox">
                        <li v-for="(item, index) in imgList" :key="index" class="libox" >
                            <div class="picture">
                                <img :src="item.imgUrl" alt />
                            </div>
                            <div class="box">
                                <el-button type="primary" @click="moveUp(index)" v-if="index !== 0" size="small" plain >上移</el-button>
                                <el-button type="primary" @click="moveDown(index)" v-if="index !== imgList.length - 1" size="small" plain >下移</el-button>
                                <el-button type="danger" @click="removephoto(index)" size="small" plain >删除</el-button>
                            </div>
                            <Input v-model="item.imgInfo" placeholder="请输入40字以内的图片宣传语" style="width: 200px" clearable/>
                        </li>
                    </ul>
                </div>
            </diV>
            <div slot="footer">
                <el-button @click="cancel(1)" size="small" plain type="info" v-if="isAdd" >取消</el-button>
                <el-button @click="submitAll" type="primary" size="small" plain v-if="isAdd" v-preventReClick="1500" >保存</el-button>
            </div>
        </Modal>

        <!-- 选择项目地址弹窗 -->
        <Modal v-model="gpsModal" title="选择项目位置" width="1000px" :mask-closable="false" >
            <div class="msg">
                <div style="width: 900px;height: 500px;margin: 10px auto;position: relative;" >
                    <div id="container" class="container"></div>
                    <div class="searchAddress">
                        <Input search enter-button placeholder="请输入准确的项目地址" style="width: 300px" @on-search="searchAddress" v-model="address" clearable/>
                    </div>
                </div>
            </div>
            <div slot="footer">
                <el-button @click="cancel(3)" size="small" plain >取消</el-button>
                <el-button type="primary" @click="submitGPS" size="small" plain >确定</el-button>
            </div>
        </Modal>
    </div>
</template>

<script>
import {
    getProectList,
    getProectDetails,
    getProectUpdate,
    getProectUpload,
} from "@/api/api.js";
export default {
    data() {
        return {
            totalCount: "",
            pageNum: 1,
            pageSize: 10,
            list: [],
            addressList: [],
            isAdd: false,
            stepCurrent: 1,
            detailmodal: false,
            keyword: "",
            src: "",
            prodect: {
                name: "",
                title: "",
                period: "",
                money: "",
                constructionUnit: "",
                supervisionUnit: "",
                explorationUnit: "",
                contractor: "",
                qualityCareUnit: "",
                detectionUnit: "",
                description: "",
                id: "",
                startDate: "",
                completeDate: "",
                projectCode: "",
                builderLicenseNum: "",
                lat: "",
                lng: "",
                ads: "",
            },
            imgList: [],
            detail: {},
            x: [],
            value: "",
            postList: [],
            postdetailsList: [],
            unitList: [],
            unitdetailsList: [],
            arr: [],
            btnList: [],
            detailsIndex: "",
            detailsRows: "",
            detailImgList: [],
            ads: "请选择项目地址",
            gpsModal: false,
            ads: "",
            polygons: [],
            prjmap: "",
            length: 20,
            address: "",
            marker: null,
            adsLat: "",
            adsLng: "",
        };
    },
    methods: {
        bubbleSort(arr) {
            if (Array.isArray(arr)) {
                for (var i = arr.length - 1; i > 0; i--) {
                    for (var j = 0; j < i; j++) {
                        if (arr[j].deptId < arr[j + 1].deptId) {
                            [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];
                        }
                    }
                }
                return arr;
            }
        },
        getAllList() {
            let _that = this;
            this.list = [];
            let params = {
                pageSize: this.pageSize,
                pageNum: this.pageNum,
                keyword: this.keyword,
            };
            getProectList(params)
                .then((res) => {
                    if (res.code == 200) {
                        AMap.service("AMap.Geocoder", () => {
                            let list = [];
                            //回调函数
                            //实例化Geocoder
                            let geocoder = new AMap.Geocoder({
                                city: "", //城市，默认:“全国”
                            });
                            // return;
                            res.data.list.forEach((v, i) => {
                                let lnglatXY = [v.lng, v.lat]; //地图上所标点的坐标
                                geocoder.getAddress(lnglatXY, (status, result) => {
                                        let city;
                                        if ( status === "complete" && result.info === "OK" ) {
                                            //获得了有效的地址信息:
                                            //即，result.regeocode.formattedAddress
                                            city = result.regeocode.formattedAddress;
                                        } else {
                                            city = "暂无位置信息";
                                            //获取地址失败
                                        }
                                        let obj = {
                                            city: city,
                                            deptId: v.deptId,
                                            name: v.name,
                                            cover: v.cover,
                                        };
                                        list.push(obj);
                                        list = _that.bubbleSort(list);
                                        this.list = list;
                                    }
                                );
                            });
                        });
                        this.totalCount = res.data.total;
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        getGPS() {
            var _that = this;
            _that.gpsModal = true;
            _that.address = "";
            _that.prjmap = new AMap.Map("container", {
                zoom: 14,
            });
            AMap.event.addListener(_that.prjmap, "click", function (e) {
                if (_that.marker != null) {
                    _that.prjmap.remove(_that.marker);
                }
                _that.marker = new AMap.Marker({
                    icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_bs.png",
                    position: [e.lnglat.lng, e.lnglat.lat],
                    offset: new AMap.Pixel(-20, -40),
                });
                _that.marker.setMap(_that.prjmap);
                _that.prodect.lng = e.lnglat.lng;
                _that.prodect.lat = e.lnglat.lat;
                _that.address = "";
                AMap.service("AMap.Geocoder", function () {
                    //回调函数
                    //实例化Geocoder
                    var geocoder = new AMap.Geocoder({
                        city: "", //城市，默认:“全国”
                    });
                    var lnglatXY = [e.lnglat.getLng(), e.lnglat.getLat()]; //地图上所标点的坐标
                    geocoder.getAddress(lnglatXY, function (status, result) {
                        if (status === "complete" && result.info === "OK") {
                            //获得了有效的地址信息:
                            //即，result.regeocode.formattedAddress
                            var city = result.regeocode.formattedAddress;
                        } else {
                            var city = "暂无位置信息";
                            //获取地址失败
                        }
                        _that.prodect.ads = city;
                    });
                });
            });
            if (_that.prodect.lng != "") {
                _that.marker = new AMap.Marker({
                    icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_bs.png",
                    position: [_that.prodect.lng, _that.prodect.lat],
                    offset: new AMap.Pixel(-20, -40),
                });
                _that.marker.setMap(_that.prjmap);
            } else {
                _that.marker = new AMap.Marker({});
            }
        },
        searchAddress() {
            if (this.address == "") {
                this.$Modal.warning({
                    title: "您有必填字段",
                    content: "请输入地址",
                });
                return;
            }
            var _that = this;
            if (_that.marker != null) {
                _that.prjmap.remove(_that.marker);
            }
            var geocoder = new AMap.Geocoder({
                city: "", //城市设为北京，默认：“全国”
            });

            _that.marker = new AMap.Marker();
            geocoder.getLocation(_that.address, function (status, result) {
                if (status === "complete" && result.geocodes.length) {
                    var lnglat = result.geocodes[0].location;
                    // document.getElementById('lnglat').value = lnglat;
                    _that.prodect.lng = lnglat.lng;
                    _that.prodect.lat = lnglat.lat;
                    _that.prodect.ads = _that.address;
                    _that.marker.setPosition(lnglat);
                    _that.prjmap.add(_that.marker);
                    _that.prjmap.setFitView(_that.marker);
                    _that.address = "";
                } else {
                    _that.$Message.warning("根据地址查询位置失败");
                    // log.error('根据地址查询位置失败');
                }
            });
        },
        submitGPS() {
            if (this.prodect.lng == "") {
                this.$Modal.warning({
                    title: "提示",
                    content: "请选择项目位置",
                });
                return;
            }
            this.adsLat = this.prodect.lat;
            this.adsLng = this.prodect.lng;
            this.ads = this.prodect.ads;
            this.gpsModal = false;
        },
        searchAll(e) {
            this.pageNum = 1;
            this.getAllList();
        },

        pageChange(index) {
            this.pageNum = index;
            this.getAllList();
        },
        getdetails(index, rows) {
            this.detailsIndex = index;
            this.detailsRows = rows;
            this.isAdd = false;
            let params = {
                id: rows[index].deptId,
            };
            getProectDetails(params)
                .then((res) => {
                    if (res.code == 200) {
                        this.detail = res.data;
                        this.postList = res.data.postList;
                        this.unitList = res.data.unitList;
                        localStorage.setItem(
                            "postList",
                            JSON.stringify(this.postList)
                        );
                        localStorage.setItem(
                            "unitList",
                            JSON.stringify(this.unitList)
                        );
                        this.detailImgList = res.data.imgList;
                        var _that = this;
                        AMap.service("AMap.Geocoder", function () {
                            //回调函数
                            //实例化Geocoder
                            var geocoder = new AMap.Geocoder({
                                city: "", //城市，默认:“全国”
                            });
                            // return;
                            var lnglatXY = [res.data.lng, res.data.lat]; //地图上所标点的坐标
                            geocoder.getAddress(
                                lnglatXY,
                                function (status, result) {
                                    if (
                                        status === "complete" &&
                                        result.info === "OK"
                                    ) {
                                        //获得了有效的地址信息:
                                        //即，result.regeocode.formattedAddress
                                        var city =
                                            result.regeocode.formattedAddress;
                                    } else {
                                        var city = "暂无位置信息";
                                        //获取地址失败
                                    }
                                    _that.ads = city;
                                }
                            );
                        });
                        _that.detailmodal = true;
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        updateRow(index, rows) {
            this.detailsIndex = index;
            this.detailsRows = rows;
            this.prodect.lat = "";
            this.prodect.lng = "";
            this.imgList = [];
            this.prodect.id = rows[index].deptId;
            this.prodect.name = rows[index].name;
            let params = {
                id: this.prodect.id,
            };
            getProectDetails(params)
                .then((res) => {
                    if (res.code == 200) {
                        this.prodect.description = res.data.shortInfo;
                        this.imgList = res.data.imgList;
                        this.prodect.startDate = res.data.startDate;
                        this.prodect.completeDate = res.data.completeDate;
                        this.prodect.projectCode = res.data.projectCode;
                        this.prodect.builderLicenseNum = res.data.builderLicenseNum;
                        this.prodect.qualityCareUnit = res.data.qualityCareUnit;
                        this.prodect.detectionUnit = res.data.detectionUnit;
                        this.postList = res.data.postList;
                        this.unitList = res.data.unitList;
                        this.prodect.lat = res.data.lat || "";
                        this.prodect.lng = res.data.lng || "";
                        this.adsLat = res.data.lat || "";
                        this.adsLng = res.data.lng || "";
                        this.prodect.title = res.data.title;
                        this.prodect.period = res.data.period;
                        this.prodect.money = res.data.money;
                        this.prodect.constructionUnit = res.data.constructionUnit;
                        this.prodect.supervisionUnit = res.data.supervisionUnit;
                        this.prodect.explorationUnit = res.data.explorationUnit;
                        this.prodect.contractor = res.data.contractor;
                        var _that = this;
                        AMap.service("AMap.Geocoder", function () {
                            //回调函数
                            //实例化Geocoder
                            var geocoder = new AMap.Geocoder({
                                city: "", //城市，默认:“全国”,
                            });
                            var lnglatXY = [res.data.lng, res.data.lat]; //地图上所标点的坐标
                            geocoder.getAddress(lnglatXY, function (status, result) {
                                if ( status === "complete" && result.info === "OK" ) {
                                    //获得了有效的地址信息:
                                    //即，result.regeocode.formattedAddress
                                    var city =
                                        result.regeocode.formattedAddress;
                                } else {
                                    var city = "暂无位置信息";
                                    //获取地址失败
                                }
                                _that.prodect.ads = city;
                                _that.ads = city;
                            });
                        });
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        getStartDate(index) {
            this.prodect.startDate = index;
        },
        getExplorationUnit(index) {
            this.prodect.completeDate = index;
        },
        submitAll() {
            this.arr = [];
            let unitList = [];
            this.postList.forEach((i) => {
                let obj = {
                    post: i.post,
                    name: i.name,
                };
                this.arr.push(obj);
            });
            this.unitList.forEach((v, i) => {
                let obj = {
                    idx: i,
                    type: v.type,
                    name: v.name,
                };
                unitList.push(obj);
            });
            if (this.prodect.name == "" || this.prodect.name == undefined) {
                this.$Modal.warning({
                    title: "您有必填字段",
                    content: "项目名称不能为空",
                });
                return;
            }
            if (this.prodect.title == "" || this.prodect.title == undefined) {
                this.$Modal.warning({
                    title: "您有必填字段",
                    content: "项目简称不能为空",
                });
                return;
            }

            if (this.prodect.lat == "" || this.prodect.lat == undefined) {
                this.$Modal.warning({
                    title: "您有必填字段",
                    content: "请选择项目地址",
                });
                return;
            }
            if (
                this.prodect.startDate == "" ||
                this.prodect.startDate == undefined
            ) {
                this.$Modal.warning({
                    title: "您有必填字段",
                    content: "请选择开工时间",
                });
                return;
            }
            let str = /[\u4e00-\u9fa5]+/g;
            if (this.prodect.projectCode == "") {
                this.$Modal.warning({
                    title: "您有必填字段",
                    content: "请填写项目编码",
                });
                return;
            } else {
                if (str.test(this.prodect.projectCode)) {
                    this.$Modal.warning({
                        title: "提示",
                        content: "编码只能由数字、字母、字符组成",
                    });
                    return;
                }
                if (this.prodect.projectCode.length > 20) {
                    this.$Modal.warning({
                        title: "提示",
                        content: "编码不能超过20个字符",
                    });
                    return;
                }
            }
            if ( this.prodect.builderLicenseNum == "" || this.prodect.builderLicenseNum == undefined ) {
                this.$Modal.warning({
                    title: "您有必填字段",
                    content: "请填写项目许可证",
                });
                return;
            }
            if (!( this.prodect.description == "" || this.prodect.description == undefined )) {
                if (this.prodect.description.length > 1000) {
                    this.$Modal.warning({
                        title: "提示",
                        content: "项目简介不能超过1000个字符",
                    });
                    return;
                }
            }
            if (this.arr.length > 0) {
                for (let i in this.arr) {
                    if ( this.arr[i].post == "" || this.arr[i].name == "" || this.arr[i].post == undefined || this.arr[i].name == undefined ) {
                        this.$Modal.warning({
                            title: "您有必填字段",
                            content: "职位或姓名不能为空",
                        });
                        return;
                    }
                }
            }
            if (unitList.length > 0) {
                for (let i in unitList) {
                    if ( unitList[i].type == "" || unitList[i].name == "" || unitList[i].type == undefined || unitList[i].name == undefined ) {
                        this.$Modal.warning({
                            title: "您有必填字段",
                            content: "单位类型或单位名称不能为空",
                        });
                        return;
                    }
                }
            }
            if (this.imgList.length > 10) {
                this.$Modal.warning({
                    title: "提示",
                    content: "最多只能上传10张宣传图片",
                });
                return;
            }
            let params = {
                name: this.prodect.name,
                title: this.prodect.title,
                period: this.prodect.period,
                money: this.prodect.money,
                constructionUnit: this.prodect.constructionUnit,
                supervisionUnit: this.prodect.supervisionUnit,
                explorationUnit: this.prodect.explorationUnit,
                contractor: this.prodect.contractor,
                qualityCareUnit: this.prodect.qualityCareUnit,
                detectionUnit: this.prodect.detectionUnit,
                shortInfo: this.prodect.description,
                deptId: this.prodect.id,
                imgList: this.imgList,
                startDate: this.prodect.startDate,
                completeDate: this.prodect.completeDate,
                projectCode: this.prodect.projectCode,
                builderLicenseNum: this.prodect.builderLicenseNum,
                postList: this.arr,
                unitList,
                lat: this.prodect.lat || 30.472108,
                lng: this.prodect.lng || 114.421423,
            };
            getProectUpdate(params)
                .then((res) => {
                    if (res.code == 200) {
                        this.$Message.success("操作成功");
                        this.isAdd = false;
                        this.getdetails(this.detailsIndex, this.detailsRows);
                        this.getAllList();
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        //添加图片
        getphoto(e) {
            var file = document.getElementById("upload_file").files[0];
            //文件大小
            var imagSize = document.getElementById("upload_file").files[0].size;
            //文件类型
            var Ary = file.type;
            var formdata = new FormData();
            formdata.append("file", file, file.name);
            let config = {
                headers: { "Content-Type": "multipart/form-data" },
                // headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' }
            };
            if (!(Ary == "image/png" || Ary == "image/jpg " || Ary == "image/jpeg")) {
                this.$Modal.warning({
                    title: "提示",
                    content: "请上传正确的文件格式",
                });
                return;
            }
            if (imagSize > 1024 * 1024 * 10) {
                this.$Modal.warning({
                    title: "图片过大",
                    content: "请上传10M以内的图片",
                });
                return;
            }
            getProectUpload(formdata, config)
                .then((res) => {
                    if (res.code == 200) {
                        let obj = {
                            imgUrl: res.data.url,
                            imgId: "",
                            imgInfo: "",
                        };
                        this.imgList.push(obj);
                        //上传成功之后清除历史记录
                        document.getElementById("upload_file").value = "";
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        //删除图片
        removephoto(index) {
            this.imgList.splice(index, 1);
        },

        swapItems(index1, index2) {
            this.imgList[index1] = this.imgList.splice(index2, 1, this.imgList[index1])[0];
            return this.imgList;
        },
        //上移
        moveUp(index) {
            this.swapItems(index, index - 1);
        },
        //下移
        moveDown(index) {
            this.swapItems(index, index + 1);
        },
        //添加职位
        addPost(type) {
            if (type == 1) {
                let obj = {};
                this.postList.push(obj);
            } else if (type == 2) {
                let obj = {};
                this.unitList.push(obj);
            }
        },
        //删除职位
        remove(index, type) {
            if (type == 1) {
                this.postList.splice(index, 1);
            } else if (type == 2) {
                this.unitList.splice(index, 1);
            }
        },
        // 详情编辑
        edit_details() {
            this.isAdd = true;
            this.updateRow(this.detailsIndex, this.detailsRows);
        },

        cancel(type) {
            if (type == 1) {
                this.isAdd = false;
                this.unitList = JSON.parse(localStorage.getItem("unitList"));
                this.postList = JSON.parse(localStorage.getItem("postList"));
                if (this.postList.length > 0) {
                    this.postList = this.postList.filter(
                        (v) => v.name != "" && v.post && v.postId
                    );
                }
                if (this.unitList.length > 0) {
                    this.unitList = this.unitList.filter(
                        (v) => v.type != "" && v.name != ""
                    );
                }
            } else if (type == 3) {
                this.prodect.lng = this.adsLat || "";
                this.prodect.lat = this.adsLng || "";
                this.prodect.ads = this.ads || "暂无位置信息";
                this.gpsModal = false;
            }
        },
    },
    mounted() {
        this.btnList = JSON.parse(localStorage.getItem("arr"));
        this.getAllList();
    },
};
</script>
<style lang="less" scoped>
@import "./../../assets/style/dict.less";
@import "./../../assets/style/themeBase.less";
.pjtList {
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    background: #f5f5f5;
    .content{
        width: 100%;
        height: 100%;
        padding: 10px;
        border-radius: 10px;
        background-color: #fff;
        .search {
            margin-left: 38px;
            height: 60px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex-wrap: wrap;
            .list {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                margin-right: 20px;
                /deep/.ivu-input {
                    background: transparent;
                }
                /deep/.ivu-input:hover{
                    border-color: var(--themeColor) !important;
                }
                /deep/.ivu-input:focus{
                    box-shadow: 0 0 0 2px rgba(var(--themeColor), 0.2) !important;
                }
                /deep/.ivu-input-search{
                    background-color: var(--themeColor) !important;
                    border-color: var(--themeColor) !important;
                }
                span {
                    display: inline-block;
                    margin-right: 10px;
                }
                i{
                    font-size: 32px;
                    color: var(--themeColor);
                }
            }
            .countNum{
                font-size: 20px;
                color: var(--themeColor);
            }
        }
        .table_box {
            width: 100%;
            height: calc(100% - 120px);
            .tableList {
                width: calc(100% - 75px);
                display: flex;
                justify-content: flex-start;
                align-content: center;
                flex-wrap: wrap;
                margin: auto;
                margin-top: 20px;
                gap: 20px;
                .item {
                    // width: 18%;
                    width: 290px;
                    height: 280px;
                    border: 1px solid var(--themeColor);
                    box-sizing: border-box;
                    // margin-right: 2.5%;
                    // margin-bottom: 20px;
                    cursor: pointer;
                    transition: all 1s ease-in-out;
                    background: #fff;
                    &:hover {
                        transform: scale(1.05);
                        transition: all 1s;
                        box-shadow: 0 4px 8px rgba(3, 27, 78, 0.12);
                    }
                    &:nth-of-type(5n) {
                        margin-right: 0;
                    }
                    .img {
                        width: 100%;
                        height: 200px;
                        img {
                            display: block;
                            width: 100%;
                            height: 100%;
                        }
                    }
                    .info {
                        width: 300px;
                        padding: 15px 18px;
                        box-sizing: border-box;
                        .p {
                            display: flex;
                            justify-content: flex-start;
                            align-items: center;
                            margin-bottom: 14px;
                            .icon {
                                font-size: 16px;
                                color: var(--themeColor);
                            }
                            .name {
                                width: 70px;
                                font-size: 14px;
                                font-family: Source Han Sans CN;
                                color: var(--themeColor);
                                margin: 0 10px;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                            }
                            .sub {
                                width: 200px;
                                font-family: Source Han Sans CN;
                                font-weight: 300;
                                color: #666c71;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                            }
                        }
                    }
                }
                .clearfix{
                    margin: auto;
                }
            }
        }
    }
}

.first {
    width: 96%;
    margin: 0 auto;
    margin-top: -20px;
    h2 {
        margin-top: 20px;
        // margin-bottom: 10px;
        font-size: 14px;
        font-weight: 400;
    }
    .msg {
        width: 96%;
        margin: 0 auto;
        .list {
            width: 100%;
            display: flex;
            justify-content: space-between;
            margin-top: 15px;
            .item1 {
                position: relative;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                padding-left: 16px;
                box-sizing: border-box;
                span {
                    margin-right: 10px;
                }
                .tip {
                    color: red;
                    font-size: 16px;
                    position: absolute;
                    top: 8px;
                    left:0;
                }
            }
        }
    }
}
.ptoto_msg {
    width: 96%;
    margin: 0 auto;
    .photo {
        margin-top: 20px;
        margin-bottom: 20px;
    }
    .flle {
        position: relative;
        .img_file {
            position: absolute;
            top: 0;
            left: 0;
        }
    }
}
.imgbox {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80%;
    height: 80%;
    margin: 0 auto;
    img {
        display: block;
        width: 100%;
        height: 100%;
    }
}
.detail {
    width: 900px;
    margin: 0 auto;
    height: auto;
    margin-top: -20px;
    .tags {
        padding: 5px 10px;
        background: #fafafa;
        border-radius: 10px;
        margin-top: 20px;
        .tags_title {
            display: flex;
            justify-content: space-between;
            .el-button--primary {
                background: var(--themeColor);
                border-color: var(--themeColor);
            }
        }
    }
    p {
        width: 100%;
        font-size: 18px;
        text-align: center;
        margin-bottom: 20px;
    }
    h2 {
        font-size: 14px;
        font-weight: 400;
    }
    .list {
        width: 96%;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .item1 {
            width: 50%;
            font-size: 12px;
            height: 30px;
            span:first-child {
                display: inline-block;
                width: 100px;
            }
        }
    }
    .imglist {
        width: 850px;
        margin: 20px auto;
        height: auto;
        ul {
            width: 100%;
            height: auto;
            display: flex;
            flex-wrap: wrap;
            li {
                width: 23%;
                margin-right: 2%;
                height: 200px;
                margin-bottom: 20px;
                list-style: none;
                div {
                    width: 100%;
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    img {
                        display: block;
                        width: 100%;
                        height: 150px;
                    }
                    span {
                        display: block;
                        width: 100%;
                        height: 40px;
                    }
                }
            }
        }
    }
}
.ulbox {
    width: 96%;
    margin: 0 auto;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    li {
        width: 23%;
        margin-right: 2%;
        min-height: 200px;
        margin-bottom: 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .picture {
            width: 100%;
            height: 150px;
            img {
                display: block;
                width: 100%;
                height: 150px;
            }
        }
        .ipt {
            width: 100%;
        }
        .box {
            margin: 20px 0;
            height: 32px;
            width: 100%;
            display: flex;
            justify-content: space-between;
        }
    }
}
.job {
    width: 300px;
    height: 30px;
    border-radius: 10px;
    border: 1px solid #dcdee2;
    outline: none;
}
.item_msg {
    max-height: 300px;
    overflow: auto;
}
h2 {
    margin-top: 10px;
    margin-bottom: 10px;
    color: var(--themeColor);
}
.edit_btn {
    width: 100px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: absolute;
    top: 10px;
    right: 20px;
    span {
        font-size: 20px;
        cursor: pointer;
        margin-left: 20px;
    }
}
.no_content {
    width: 100%;
    height: 40px;
    line-height: 40px;
    padding-left: 20px;
}
.table .create-table th,
.table .create-table td {
    text-align: center !important;
}
.job,
.ipt {
    padding-left: 10px;
}
#container {
    height: 100%;
}
.msg {
    width: 96%;
    margin: 0 auto;
}
.searchAddress {
    width: 300px;
    position: absolute;
    top: 5px;
    left: 300px;
    display: flex;
    justify-content: space-between;
}
</style>

